<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
		  <button-counter title='我是title'></button-counter>
		</div>
		<div id="app2">
			<div :style="{fontSize:postFontSize+'em'}"> 
				<blog-post  v-for="item in posts" :key='item.id' @big="postFontSize+=0.1">
					
					  插槽数据
				</blog-post>
			</div>
		</div>
	</body>
	<script src="https://unpkg.com/vue@next"></script>
	<script>
	const app = Vue.createApp({})
	
	// 定义一个名为 button-counter 的新全局组件
	app.component('button-counter', {
	   props:['title']
	  ,data() {
	    return {
	      count: 0
	    }
	  },
	  template: `
	    <button @click="count++">
	      You clicked me {{ count }} times {{title}}.
	    </button>`
	})
	app.mount("#app");
	
	</script>
	
	<script>
	const app2 = Vue.createApp({
	  data() {
	    return {
	      posts: [
	        { id: 1, title: 'My journey with Vue'},
	        { id: 2, title: 'Blogging with Vue'},
	        { id: 3, title: 'Why Vue is so fun'}
	      ],
	      postFontSize: 1
	    }
	  }
	})
	
	app2.component('blog-post', {
	  props: ['title']
	  ,template: `
	    <div class="blog-post">
	      <h4>{{ title }}</h4>
	      <button @click="$emit('big')">
	        Enlarge text
			 <slot></slot>
	      </button>
	    </div>
	  `
	  
	})
	
	app2.mount('#app2')
	
	</script>>
	
</html>
